<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BFC</title>
    <style>
      .box {
        width: 500px;
        border: 5px solid red;
        overflow: hidden;
      }
      .box .c1 {
        width: 200px;
        height: 200px;
        background-color: orange;
        float: left;
      }
      .box .c2 {
        width: 200px;
        height: 200px;
        background-color: skyblue;
        float: left;
      }

      .p1 {
        width: 200px;
        height: 200px;
        background-color: orange;
        margin: 50px;
      }

      .div2 {
        overflow: hidden;
      }

      .box1 {
        width: 300px;
        height: 300px;
        background-color: skyblue;
        float: left;
      }

      .box2 {
        width: 200px;
        height: 200px;
        background-color: tomato;
        /* float: left; */
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <h1>创建BFC</h1>
    <p>BFC （Box Formatting Context ，块级格式上下文）是页面上的一个隔离的独立容器</p>

    <div class="box">
      <div class="c1"></div>
      <div class="c2"></div>
    </div>

    <h2>BFC 的其他作用</h2>
    <div class="div2">
      <p class="p1">BFC 可以取消盒子 margin 塌陷</p>
    </div>

    <div class="div2">
      <p class="p1"></p>
    </div>

    <section class="box1">box1 BFC 可以阻止元素被浮动元素覆盖</section>
    <section class="box2">box2 BFC 可以阻止元素被浮动元素覆盖</section>
  </body>
</html>
